<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram 5.11.1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="650"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw an inductor
        function drawInductor(x1, y, x2, label) {
            const centerX = (x1 + x2) / 2;
            const width = 80;
            const startX = centerX - width / 2;
            const loops = 4;
            const loopRadius = width / (2 * loops);

            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(startX, y);
            for (let i = 0; i < loops; i++) {
                ctx.arc(startX + (2 * i + 1) * loopRadius, y, loopRadius, Math.PI, 0, false);
            }
            ctx.moveTo(startX + width, y);
            ctx.lineTo(x2, y);
            ctx.stroke();

            ctx.save();
            ctx.font = 'italic 22px "Times New Roman"';
            ctx.fillText(label.slice(0, 1), centerX, y - 25);
            ctx.font = 'italic 16px "Times New Roman"';
            ctx.fillText(label.slice(1), centerX + 11, y - 20);
            ctx.restore();
        }

        // Helper function to draw a capacitor
        function drawCapacitor(x1, y, x2, label) {
            const centerX = (x1 + x2) / 2;
            const plateDist = 8;
            const plateHeight = 30;
            const leadLength = 30;

            const xPlate1 = centerX - plateDist / 2;
            const xPlate2 = centerX + plateDist / 2;

            ctx.beginPath();
            // Left lead
            ctx.moveTo(x1, y);
            ctx.lineTo(xPlate1 - leadLength, y);
            // First plate
            ctx.moveTo(xPlate1, y - plateHeight / 2);
            ctx.lineTo(xPlate1, y + plateHeight / 2);
            // Second plate
            ctx.moveTo(xPlate2, y - plateHeight / 2);
            ctx.lineTo(xPlate2, y + plateHeight / 2);
            // Right lead
            ctx.moveTo(xPlate2, y);
            ctx.lineTo(x2, y);
            ctx.stroke();

            ctx.save();
            ctx.font = 'italic 22px "Times New Roman"';
            ctx.fillText(label.slice(0, 1), centerX, y - 28);
            ctx.font = 'italic 16px "Times New Roman"';
            ctx.fillText(label.slice(1), centerX + 11, y - 23);
            ctx.restore();
        }

        // Helper function to draw a resistor
        function drawResistor(x1, y, x2, label) {
            const centerX = (x1 + x2) / 2;
            const resWidth = 80;
            const resHeight = 30;
            const startX = centerX - resWidth / 2;

            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(startX, y);
            ctx.rect(startX, y - resHeight / 2, resWidth, resHeight);
            ctx.moveTo(startX + resWidth, y);
            ctx.lineTo(x2, y);
            ctx.stroke();

            ctx.save();
            ctx.font = 'italic 22px "Times New Roman"';
            ctx.fillText(label, centerX, y - 35);
            ctx.restore();
        }

        // Helper function to draw an AC source
        function drawACSource(x1, y, x2) {
            const centerX = (x1 + x2) / 2;
            const radius = 30;

            // Leads
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(centerX - radius, y);
            ctx.moveTo(centerX + radius, y);
            ctx.lineTo(x2, y);
            ctx.stroke();

            // Circle
            ctx.beginPath();
            ctx.arc(centerX, y, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // Sine wave
            ctx.beginPath();
            const sineWaveWidth = radius * 0.8;
            ctx.moveTo(centerX - sineWaveWidth, y);
            ctx.bezierCurveTo(centerX - sineWaveWidth / 2, y - radius * 0.8, centerX + sineWaveWidth / 2, y + radius * 0.8, centerX + sineWaveWidth, y);
            ctx.stroke();
        }
        
        // Helper function to draw an arrow head
        function drawArrowHead(x, y, angle) {
            const headLength = 10;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - headLength * Math.cos(angle - Math.PI / 6), y - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x, y);
            ctx.lineTo(x - headLength * Math.cos(angle + Math.PI / 6), y - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Main drawing logic
        const xLeft = 100;
        const xRight = 400;
        
        const yL1 = 100;
        const yC1 = 180;
        const yC2 = 260;
        const yL2 = 340;
        const yR = 420;
        const ySource = 500;
        const yCaption = 580;

        // Draw left vertical wire
        ctx.beginPath();
        ctx.moveTo(xLeft, yL1);
        ctx.lineTo(xLeft, ySource);
        ctx.stroke();

        // Draw components
        drawInductor(xLeft, yL1, xRight, "L1");
        drawCapacitor(xLeft, yC1, xRight, "C1");
        drawCapacitor(xLeft, yC2, xRight, "C2");
        drawInductor(xLeft, yL2, xRight, "L2");
        drawResistor(xLeft, yR, xRight, "R");
        drawACSource(xLeft, ySource, xRight);

        // Draw right vertical wire and switch
        const switchY = 380; // y-coordinate of the switch break
        const switchGap = 10;
        const switchArmLength = 40;
        const switchAngle = -Math.PI / 4; // -45 degrees

        // Upper part of right wire
        ctx.beginPath();
        ctx.moveTo(xRight, yL1);
        ctx.lineTo(xRight, switchY - switchGap / 2);
        ctx.stroke();
        
        // Lower part of right wire
        ctx.beginPath();
        ctx.moveTo(xRight, switchY + switchGap / 2);
        ctx.lineTo(xRight, ySource);
        ctx.stroke();

        // Switch
        const switchPivotX = xRight;
        const switchPivotY = switchY - switchGap / 2;
        const switchEndX = switchPivotX + switchArmLength * Math.cos(switchAngle);
        const switchEndY = switchPivotY + switchArmLength * Math.sin(switchAngle);

        ctx.beginPath();
        ctx.moveTo(switchPivotX, switchPivotY);
        ctx.lineTo(switchEndX, switchEndY);
        ctx.stroke();

        // Add labels A, B, K
        ctx.font = '22px "Times New Roman"';
        ctx.fillText("A", xRight + 25, (yL1 + yC1) / 2);
        ctx.fillText("B", xRight + 25, (yC1 + yC2) / 2);
        ctx.fillText("K", switchEndX + 15, switchEndY);
        
        // Draw currents i01 and i02
        // i01
        const i01_y = yL1 + 25;
        drawArrowHead(xRight, i01_y, -Math.PI / 2); // Downward arrow
        ctx.save();
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText("i", xRight + 20, i01_y);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText("01", xRight + 28, i01_y + 5);
        ctx.restore();

        // i02
        const i02_y = yL2 + 25;
        drawArrowHead(xRight, i02_y, Math.PI / 2); // Upward arrow
        ctx.save();
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText("i", xRight + 20, i02_y);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText("02", xRight + 28, i02_y + 5);
        ctx.restore();


        // Draw caption
        ctx.font = '24px "SimSun"';
        ctx.fillText("电图 5.11.1", canvas.width / 2, yCaption);

    </script>
</body>
</html>